<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <base th:href="${#request.getContextPath()}+'/'">
    <link rel="stylesheet" href="/static/common/element/index.css"/>
</head>
<body>
<div id="user">
    <template>
        <div style="margin-bottom:10px;">
            <el-input prefix-icon="el-icon-search" style="width: 13%" v-model="queryForm.realname" placeholder="真实姓名"></el-input>
            <el-input prefix-icon="el-icon-search" style="width: 13%" v-model="queryForm.username" placeholder="登录账号"></el-input>
            <el-input prefix-icon="el-icon-search" style="width: 13%" v-model="queryForm.identityNumber" placeholder="身份证号"></el-input>
            <el-input prefix-icon="el-icon-search" style="width: 13%" v-model="queryForm.phone" placeholder="手机号码"></el-input>
            <el-input prefix-icon="el-icon-search" style="width: 13%" v-model="queryForm.email" placeholder="电子邮箱"></el-input>
            <el-button type="primary" icon="el-icon-search" @click="submitQueryForm">查询</el-button>
            <el-button icon="el-icon-refresh-right" @click="clearQueryForm">重置</el-button>
        </div>
        <div style="margin-bottom:20px;">
            <el-button type="primary" icon="el-icon-circle-plus-outline" v-if="button.insert" @click="openInsertDialog">新增</el-button>
            <el-button type="danger" icon="el-icon-video-pause" v-if="button.freeze" @click="openFreezeDialog">冻结</el-button>
            <el-button type="danger" icon="el-icon-video-play" v-if="button.unFreeze" @click="openUnFreezeDialog">解冻</el-button>
            <el-button type="danger" icon="el-icon-remove-outline" v-if="button.remove" @click="openRemoveMessageBox">删除</el-button>
        </div>

        <el-table :data="tableData" :row-style="{height:'40px'}" :cell-style="{padding:'0px'}" :header-cell-style="{'text-align':'center'}" style="margin-bottom:10px;font-size: 14px"
                  :default-sort="{prop: 'date', order: 'descending'}" row-key="id" @selection-change="handleSelectionChange" stripe border>
            <el-table-column type="selection" width="55" align="center"></el-table-column>
            <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
            <el-table-column prop="realname" label="真实姓名"></el-table-column>
            <el-table-column prop="status" label="账户状态" width="80" align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.status==0" class="el-icon-circle-check" style="color:rgb(103, 194, 58);"></span>
                    <span v-else class="el-icon-circle-close" style="color:rgb(194, 58, 63);"></span>
                </template>
            </el-table-column>
            <el-table-column prop="username" label="登录账号"></el-table-column>
            <el-table-column prop="identityNumber" label="身份证号" width="180" align="center"></el-table-column>
            <el-table-column prop="phone" label="手机号码" width="120"></el-table-column>
            <el-table-column prop="email" label="电子邮箱"></el-table-column>
            <el-table-column prop="avatar" label="头像" width="70" align="center">
                <template slot-scope="scope">
                    <el-avatar shape="square" size="small" :src="scope.row.avatar"></el-avatar>
                </template>
            </el-table-column>
            <el-table-column prop="birthday" label="出生日期" width="120" align="center"></el-table-column>
            <el-table-column prop="sex" label="性别" width="80" align="center" :formatter="formatSex"></el-table-column>
            <el-table-column prop="age" label="年龄" width="60" align="center"></el-table-column>
            <el-table-column label="操作" width="250" align="center" fixed="right">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="openDetailDialog(scope.row)">详情</el-button>
                    <el-button type="success" size="mini" v-if="button.update" @click="openUpdateDialog(scope.row)">修改</el-button>
                    <el-button type="danger" size="mini" v-if="button.reset" @click="openResetDialog(scope.row)">密码重置</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination background :page-size="10" :total="total" :current-page="currentPage" layout="total, sizes, prev, pager, next, jumper" :page-sizes="[10, 50, 100]"
                       @size-change="handleSizeChange" @current-change="handleCurrentChange">
        </el-pagination>

        <el-dialog title="新增" width="90%" :visible.sync="insertDialog" :modal="false" :close-on-click-modal="false">
            <el-form :model="insertForm" ref="insertForm" :rules="rules" label-width="100px">
                <el-row>
                    <el-col :span="7">
                        <el-form-item label="真实姓名" prop="realname">
                            <el-input v-model="insertForm.realname"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item label="登录账号" prop="username">
                            <el-input v-model="insertForm.username"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item label="登录密码" prop="password">
                            <el-input type="password" v-model="insertForm.password" placeholder="密码"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="7">
                        <el-form-item label="身份证号" prop="identityNumber">
                            <el-input v-model="insertForm.identityNumber" maxlength="18" show-word-limit></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item label="电子邮箱" prop="email">
                            <el-input v-model="insertForm.email"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item label="手机号码" prop="phone">
                            <el-input v-model="insertForm.phone" maxlength="11" show-word-limit></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="7">
                        <el-form-item label="头像" prop="avatar">
                            <el-upload class="avatar-uploader" :action="actionUrl" :show-file-list="false"
                                       :on-success="handleAvatarSuccess.bind(this,'insertForm')"
                                       :before-upload="beforeAvatarUpload">
                                <el-avatar v-if="insertForm.avatar" :src="insertForm.avatar" class="avatar"></el-avatar>
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                <div slot="tip" class="el-upload__tip">上传头像图片大小不能超过2MB!</div>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                    <el-col :span="14">
                        <el-form-item label="组织机构" prop="organizationList">
                            <el-cascader v-model="insertForm.organizationList" :options="organizationTreeList"
                                         :props="{value:'id', label:'label', expandTrigger:'hover', multiple: true, checkStrictly:true, emitPath:false}"
                                         :show-all-levels="true" filterable clearable>
                                <template slot-scope="{ node, data }">
                                    <span>{{ data.label }}</span>
                                    <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
                                </template>
                            </el-cascader>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="21">
                        <el-form-item label="角色" prop="roleId">
                            <el-select v-model="insertForm.roleList" multiple placeholder="请选择" style="width:100%">
                                <el-option v-for="item in roleList" :key="item.id" :label="item.roleName" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button icon="el-icon-circle-close" @click="insertDialog = false">取 消</el-button>
                <el-button icon="el-icon-circle-check" type="primary" @click="insert">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="详情" width="80%" :visible.sync="detailDialog" :modal="false" :close-on-click-modal="false">
            <template>
                <div style="margin:0 auto;">
                    <table class="table table-striped table-bordered" align="center" valign="center">
                        <tr>
                            <td class="column" colspan="9">泰晟环境服务（山东）有限公司应聘登记表</td>
                        </tr>
                        <tr>
                            <td class="column">姓名</td>
                            <td class="value"></td>
                            <td class="column">性别</td>
                            <td class="value">
                                <el-tag type="danger" v-if="0">女</el-tag>
                                <el-tag v-if="1">男</el-tag>
                                <el-tag type="info" v-if="2">未知</el-tag>
                            </td>
                            <td class="column">民族</td>
                            <td class="value">汉</td>
                            <td class="column">出生年月</td>
                            <td class="value"></td>
                            <td class="value" rowspan="3">
                                <el-image src="https://avatars.githubusercontent.com/u/47814002?s=60&v=4"></el-image>
                            </td>
                        </tr>
                        <tr>
                            <td class="column">政治面貌</td>
                            <td class="value">
                                <el-tag type="info" v-if="0">群众</el-tag>
                                <el-tag type="success" v-if="1">团员</el-tag>
                                <el-tag type="danger" v-if="2">党员</el-tag>
                            </td>
                            <td class="column">身份证号</td>
                            <td class="value" colspan="3"></td>
                            <td class="column">婚姻状况</td>
                            <td class="value">
                                <el-tag type="danger" v-if="0">已婚</el-tag>
                                <el-tag v-else="1">未婚</el-tag>
                            </td>
                            <!--<td class="value"></td>-->
                        </tr>
                        <tr>
                            <td class="column">现家庭地址</td>
                            <td class="value" colspan="4"></td>
                            <td class="column">户口所在地</td>
                            <td class="value" colspan="2"></td>
                            <!--<td class="value"></td>-->
                        </tr>
                        <tr>
                            <td class="column">专业职称证书</td>
                            <td class="value" colspan="2"></td>
                            <td class="column">国家注册师证书</td>
                            <td class="value" colspan="2"></td>
                            <td class="column">工人等级技术证书</td>
                            <td class="value" colspan="2"></td>
                        </tr>
                        <tr>
                            <td class="column" rowspan="4">教育经历</td>
                            <td class="column">学历信息</td>
                            <td class="column" colspan="2">毕业院校</td>
                            <td class="column" colspan="2">专业</td>
                            <td class="column">学历</td>
                            <td class="column" colspan="2">学习时间</td>
                        </tr>
                        <tr>
                            <!--<td class="column"></td>-->
                            <td class="column">全日制</td>
                            <td class="value" colspan="2"></td>
                            <td class="value" colspan="2"></td>
                            <td class="value"></td>
                            <td class="value" colspan="2"></td>
                        </tr>
                        <tr>
                            <!--<td class="column"></td>-->
                            <td class="column">自学考试</td>
                            <td class="value" colspan="2"></td>
                            <td class="value" colspan="2"></td>
                            <td class="value"></td>
                            <td class="value" colspan="2"></td>
                        </tr>
                        <tr>
                            <!--<td class="column"></td>-->
                            <td class="column">在职成人教育</td>
                            <td class="value" colspan="2"></td>
                            <td class="value" colspan="2"></td>
                            <td class="value"></td>
                            <td class="value" colspan="2"></td>
                        </tr>
                        <tr>
                            <td class="column" rowspan="6">工作经历</td>
                            <td class="column" colspan="2">工作单位</td>
                            <td class="column">职务（职位）</td>
                            <td class="column" colspan="2">工作时间</td>
                            <td class="column" colspan="3">离职原因</td>
                        </tr>
                        <tr>
                            <!--<td class="column"></td>-->
                            <td class="value" colspan="2"></td>
                            <td class="value"></td>
                            <td class="value" colspan="2"></td>
                            <td class="value" colspan="3"></td>
                        </tr>
                        <tr>
                            <!--<td class="column"></td>-->
                            <td class="value" colspan="2"></td>
                            <td class="value"></td>
                            <td class="value" colspan="2"></td>
                            <td class="value" colspan="3"></td>
                        </tr>
                        <tr>
                            <!--<td class="column"></td>-->
                            <td class="value" colspan="2"></td>
                            <td class="value"></td>
                            <td class="value" colspan="2"></td>
                            <td class="value" colspan="3"></td>
                        </tr>
                        <tr>
                            <!--<td class="column"></td>-->
                            <td class="value" colspan="2"></td>
                            <td class="value"></td>
                            <td class="value" colspan="2"></td>
                            <td class="value" colspan="3"></td>
                        </tr>
                        <tr>
                            <!--<td class="column"></td>-->
                            <td class="value" colspan="2"></td>
                            <td class="value"></td>
                            <td class="value" colspan="2"></td>
                            <td class="value" colspan="3"></td>
                        </tr>
                        <tr>
                            <td class="column" rowspan="6">家庭主要成员及社会关系</td>
                            <td class="column">基本信息</td>
                            <td class="column" colspan="2">工作单位</td>
                            <td class="column" colspan="2">政治面貌</td>
                            <td class="column" colspan="2">职务（职位）</td>
                            <td class="column">年龄</td>
                        </tr>
                        <tr>
                            <!--<td class="column"></td>-->
                            <td class="column">父亲</td>
                            <td class="value" colspan="2"></td>
                            <td class="value" colspan="2"></td>
                            <td class="value" colspan="2"></td>
                            <td class="value"></td>
                        </tr>
                        <tr>
                            <!--<td class="column"></td>-->
                            <td class="column">母亲</td>
                            <td class="value" colspan="2"></td>
                            <td class="value" colspan="2"></td>
                            <td class="value" colspan="2"></td>
                            <td class="value"></td>
                        </tr>
                        <tr>
                            <!--<td class="column"></td>-->
                            <td class="column">配偶</td>
                            <td class="value" colspan="2"></td>
                            <td class="value" colspan="2"></td>
                            <td class="value" colspan="2"></td>
                            <td class="value"></td>
                        </tr>
                        <tr>
                            <!--<td class="column"></td>-->
                            <td class="column">子女</td>
                            <td class="value" colspan="2"></td>
                            <td class="value" colspan="2"></td>
                            <td class="value" colspan="2"></td>
                            <td class="value"></td>
                        </tr>
                        <tr>
                            <!--<td class="column"></td>-->
                            <td class="value"></td>
                            <td class="value" colspan="2"></td>
                            <td class="value" colspan="2"></td>
                            <td class="value" colspan="2"></td>
                            <td class="value"></td>
                        </tr>
                        <tr>
                            <td class="column">主要工作业绩</td>
                            <td class="value" colspan="8"></td>
                        </tr>
                        <tr>
                            <td class="column">所受奖励情况</td>
                            <td class="value" colspan="8"></td>
                        </tr>
                        <tr>
                            <td class="column">所受处分（处罚）情况</td>
                            <td class="value" colspan="8"></td>
                        </tr>
                        <tr>
                            <td class="column">特长</td>
                            <td class="value" colspan="8"></td>
                        </tr>
                        <tr>
                            <td class="column" rowspan=2">本人电话</td>
                            <td class="column">手机</td>
                            <td class="value" colspan="7"></td>
                        </tr>
                        <tr>
                            <!--<td class="column"></td>-->
                            <td class="column">座机</td>
                            <td class="value" colspan="7"></td>
                        </tr>
                        <tr>
                            <td class="column">应急联系人及电话</td>
                            <td class="column">姓名</td>
                            <td class="value" colspan="3"></td>
                            <td class="column">电话</td>
                            <td class="value" colspan="3"></td>
                        </tr>
                        <tr>
                            <td class="value" colspan="3">申请应聘职位</td>
                            <td class="value" colspan="3">面试、测试情况</td>
                            <td class="value" colspan="3">录用情况</td>
                        </tr>
                        <tr>
                            <td class="value" rowspan="2" colspan="3"></td>
                            <td class="value" rowspan="2" colspan="3"></td>
                            <td class="value" rowspan="2" colspan="3"></td>
                        </tr>
                        <tr>
                        </tr>
                    </table>
                </div>
            </template>
            <div slot="footer" class="dialog-footer">
                <el-button icon="el-icon-circle-close" @click="detailDialog = false">取 消</el-button>
                <el-button icon="el-icon-circle-check" type="primary" @click="print">打 印</el-button>
            </div>
        </el-dialog>

        <el-dialog title="修改" width="90%" :visible.sync="updateDialog" :modal="false" :close-on-click-modal="false">
            <el-form :model="updateForm" ref="updateForm" :rules="rules" label-width="100px">
                <el-row>
                    <el-col :span="7">
                        <el-form-item label="登录账号" prop="username">
                            <el-input v-model="updateForm.username" :disabled="true"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item label="真实姓名" prop="realname">
                            <el-input v-model="updateForm.realname"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item label="身份证号" prop="identityNumber">
                            <el-input v-model="updateForm.identityNumber" maxlength="18" show-word-limit></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="7">
                        <el-form-item label="电子邮箱" prop="email">
                            <el-input v-model="updateForm.email"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item label="手机号码" prop="phone">
                            <el-input v-model="updateForm.phone" maxlength="11" show-word-limit></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="7">
                        <el-form-item label="出生日期" prop="birthday">
                            <el-input v-model="updateForm.birthday" :disabled="true"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item label="性别" prop="sex">
                            <el-radio-group v-model="updateForm.sex" :disabled="true">
                                <el-radio-button v-for="item in sexItem" :label="item.value" :name="item.name">{{item.name}}</el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item label="年龄" prop="age">
                            <el-input v-model="updateForm.age" :disabled="true"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="7">
                        <el-form-item label="头像" prop="avatar">
                            <el-upload class="avatar-uploader" :action="actionUrl" :show-file-list="false"
                                       :on-success="handleAvatarSuccess.bind(this,'updateForm')"
                                       :before-upload="beforeAvatarUpload">
                                <el-avatar v-if="updateForm.avatar" :src="updateForm.avatar" class="avatar"></el-avatar>
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                <div slot="tip" class="el-upload__tip">上传头像图片大小不能超过2MB!</div>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                    <el-col :span="14">
                        <el-form-item label="组织机构" prop="organizationList">
                            <el-cascader v-model="updateForm.organizationList" :options="organizationTreeList"
                                         :props="{value:'id', label:'label', expandTrigger:'hover', multiple: true, checkStrictly:true, emitPath:false}"
                                         :show-all-levels="true" filterable clearable>
                                <template slot-scope="{ node, data }">
                                    <span>{{ data.label }}</span>
                                    <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
                                </template>
                            </el-cascader>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="21">
                        <el-form-item label="角色" prop="roleList">
                            <el-select v-model="updateForm.roleList" multiple placeholder="请选择" style="width:100%">
                                <el-option v-for="item in roleList" :key="item.id" :label="item.roleName" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button icon="el-icon-circle-close" @click="updateDialog = false">取 消</el-button>
                <el-button icon="el-icon-circle-check" type="primary" @click="update">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="密码重置" width="30%" :visible.sync="resetDialog" :modal="false" :close-on-click-modal="false">
            <el-form :model="passwordResetForm" ref="passwordResetForm" :rules="passwordFormRules" label-width="100px">
                <el-form-item label="登录密码" prop="newPassword">
                    <el-input v-model="passwordResetForm.newPassword" show-password></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="confirmPassword">
                    <el-input v-model="passwordResetForm.confirmPassword" show-password></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button icon="el-icon-circle-close" @click="resetDialog = false">取 消</el-button>
                <el-button icon="el-icon-circle-check" type="primary" @click="reset">确 定</el-button>
            </div>
        </el-dialog>

    </template>
</div>
</body>
<script type="text/javascript" src="/static/common/vue/vue.min.js"></script>
<script type="text/javascript" src="/static/common/element/index.js"></script>
<script type="text/javascript" src="/static/common/print/print.min.js" type="module"></script>
<script type="text/javascript" src="/static/common/util/axios.min.js"></script>
<script type="text/javascript" src="/static/common/api.js"></script>
<script type="text/javascript" src="/static/common/module/sys/user.js"></script>
<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }

    /* 详情表格 */
    .table {
        border-collapse: collapse;
        border-spacing: 0;
        background-color: transparent;
        display: table;
        width: 100%;
        max-width: 100%;
        width: 800px;
        margin: 0 auto;
    }

    .table td {
        text-align: center;
        vertical-align: middle;
        font-size: 14px;
        font-family: 'Arial Normal', 'Arial';
        color: #333333;
        padding: 8px 12px;
    }

    .table-bordered {
        border: 1px solid #ddd;
    }

    * {
        margin: 0px;
        padding: 0px;
    }

    .column {
        width: 30px;
        height: 30px;
        border: 1px solid #333;
        background: #f1f1f1;
    }

    .value {
        width: 70px;
        height: 30px;
        border: 1px solid #333;
    }

</style>
</html>
